// import React, {useCallback, useMemo, useState, useReducer, useContext, useEffect, useLayoutEffect, useRef} from 'react';
import React,{useCallback, useMemo, useState, useReducer, useEffect, useLayoutEffect, useRef} from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';


function Animation(){
  const ref = useRef()

  useEffect(()=>{
    ref.current.style.WebkitTransform='translate(500px)';
    ref.current.style.transition='all 500ms';
  })
  //↑ 有动画效果
  //↓ 无动画效果 (因为会在浏览器绘制之前 就执行, So会直接绘制最终的效果
  /*useLayoutEffect(()=>{
    ref.current.style.WebkitTransform='translate(500px)';
    ref.current.style.transition='all 500ms';
  })*/

  const style = {
    width: '100px',
    height: '100px',
    backgroundColor: 'red'
  }

  return <div style={style} ref={ref}>内容</div>
}

ReactDOM.render(<Animation/>, document.getElementById('root'));
